<template>
  <div class="status">
    <echarts-load v-if="stasFlag || reload_stas" :chartFlag="stasFlag" :reload="reload_stas" @refreshF="refreshStatus"></echarts-load>
    <el-row :gutter="20" class="card-row" v-else>
      <!-- first -->
      <el-col :span="6" style="padding: 0 15px 0 0">
        <div class="grid-content bg-purple-dark public-content">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#el-icon-myproblem" style="font-size: 50px" />
          </svg>
          <ul class="card-ul">
            <li>
              <div class="contain">
                <span style="color: #1989fa">{{ shuju.WTALL }}</span>
                <span>问题总数</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.WTTODAY }}</span>
                <span>今日问题总数</span>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <!-- second -->
      <el-col :span="6" style="padding: 0 15px 0 0">
        <div class="grid-content bg-purple public-content">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#el-icon-myfault" style="font-size: 50px" />
          </svg>
          <ul class="card-ul">
            <li>
              <div class="contain">
                <span style="color: #f56c6c">{{ shuju.GZAll }}</span>
                <span>今日故障总数</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.GZTODAY }}</span>
                <span>今日转工单</span>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12" style="padding: 0">
        <div class="grid-content bg-purple-light public-content">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#el-icon-mywork_order" style="font-size: 50px" />
          </svg>
          <ul class="card-ul" style="flex: 8">
            <li>
              <div class="contain">
                <span style="color: #e6a23c">{{ shuju.GDZS }}</span>
                <span>工单总数</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.YSL }}</span>
                <span>已受理</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.DQR }}</span>
                <span>待确认</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.ZCGB }}</span>
                <span>正常关闭</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.YCGB }}</span>
                <span>异常关闭</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.BH }}</span>
                <span>驳回</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.GQ }}</span>
                <span>挂起</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{ shuju.WP }}</span>
                <span>外派</span>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { yeWu } from '../utils/allUrl.js'
import { timeLoad } from '@/assets/js/setTime'
import echartsLoad from '@/components/Echarts/echartsLoad'
export default {
  props: ['refresh'],
  components: { echartsLoad },
  data: function () {
    return {
      shuju: {
        GDZS: '',
        YSL: '',
        DQR: '',
        ZCGB: '',
        BH: '',
        GQ: '',
        WP: '',
        YCGB: '',
        WTALL: '',
        WTTODAY: '',
        GZAll: '',
        GZTODAY: '',
      },
      stasFlag: false,
      reload_stas: false,
      statusTimer: null,
    }
  },
  watch: {
    refresh: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          this.getShuju()
        }
      },
    },
    stasFlag(newVal, oldVal) {
      this.statusTimer = setTimeout(() => {
        if (this.stasFlag) {
          this.stasFlag = false
          this.reload_stas = true
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.getShuju()
  },
  methods: {
    async getShuju() {
      clearTimeout(this.statusTimer)
      this.stasFlag = true
      const { data: res } = await this.$http.post(`${yeWu}gdjs/TongJi`)
      switch (res.code) {
        case '0000':
          this.shuju = res.data
          // this.$emit('refreshOff', {
          //   type: false,
          // })
          break
        case '0013':
          this.shuju = { GDZS: 0, YSL: 0, DQR: 0, ZCGB: 0, BH: 0, GQ: 0, WP: 0, YCGB: 0, WTALL: 0, WTTODAY: 0, GZAll: 0, GZTODAY: 0 }
          break
        default:
          this.reload_stas = true
          break
      }
      this.$emit('refreshOff', {
        type: false,
      })
      this.stasFlag = false
    },
    refreshStatus() {
      this.reload_stas = false
      this.getShuju()
    },
  },
}
</script>

<style lang="scss" scoped>
.status {
  height: 70px;
  margin-bottom: 15px;
}
.card-row {
  height: 70px;
  line-height: 70px;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: none;
  border-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border: none;
  .bg-purple-dark {
    background: #eff4ff;
  }
  .bg-purple {
    background: #fef0f0;
  }
  .bg-purple-light {
    background: #fdf6ec;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .public-content {
    display: flex;
    height: 100%;
    .iconfont {
      width: 40px;
      height: 40px;
      padding: 16px 15px 14px 20px;
    }
  }
  ul.card-ul {
    // flex: 1;
    height: 100%;
    display: flex;
    flex: 2;
    -webkit-box-flex: 2;
    -ms-flex: 2;
    li {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      // display: table;
      div.contain {
        display: table-cell;
        vertical-align: middle;
        span {
          display: block;
          line-height: 20px;
          color: #7f7f7f;
          font-size: 12px;
          &:nth-child(1) {
            font-size: 24px;
            color: #666666;
            line-height: 33px;
          }
        }
      }
    }
  }
}
</style>
